<template>
  <div class="wrapper">
      <div class="container">
          <div class="left">
              <div class="search-container">
                  <a-input ref="userNameInput" v-model="searchValue" placeholder="搜索" size="large">
                    <a-icon slot="prefix" type="search" />
                  </a-input>
              </div>
              <div class="menu-title">成员</div>
              <div class="menu">
                 
                   <a-menu mode="vertical" @click="handleClick">
                        <a-menu-item key="1">
                            <a-icon type="team" />
                           所有成员
                        </a-menu-item>
                         <a-menu-item key="2">
                            <a-icon type="team" />
                            新加入的成员
                        </a-menu-item>
                        <a-menu-item key="3">
                            <a-icon type="stop" />
                            停用的成员
                        </a-menu-item>
                    </a-menu>
              </div>
          </div>
          <div class="right">
              <div class="user-list">
                  <a-card title="所有成员 ● 3333" :bordered="false">
                    <a slot="extra" href="#" @click="handleAddMembers">
                        <a-icon type="user-add" /> 添加成员
                    </a>
                    <a-list
                    class="comment-list"
                    item-layout="horizontal"
                    :data-source="data"
                >
                    <a-list-item slot="renderItem" slot-scope="item">
                    <a-comment :author="item.author" :avatar="item.avatar">
                        <template slot="actions">
                          <span v-for="action in item.actions" :key="action">{{ action }}</span>
                        </template>
                        <p slot="content">
                            {{ item.content }}
                        </p>
                    </a-comment>
                    </a-list-item>
                </a-list>
                    </a-card>
              </div>
          </div>

      </div>
      <div class="add-user">
          <a-modal
            title="添加成员"
            :visible="visible"
            :confirm-loading="confirmLoading"
            @ok="handleOk"
            @cancel="handleCancel"
            >
           <a-input-search placeholder="输入用户名称搜索" @search="onSearch" size="large"/>
                 <a-list
                    class="comment-list"
                    item-layout="horizontal"
                    :data-source="data"
                >
                    <a-list-item slot="renderItem" slot-scope="item">
                        <a-comment :author="item.author" :avatar="item.avatar">
                            <template slot="actions">
                            <span v-for="action in item.actions" :key="action">{{ action }}</span>
                             <a-tooltip title="启用账号">
                                        <a-icon type="check-circle"/>
                                    </a-tooltip>
                            </template>
                            <p slot="content">
                                {{ item.content }}
                            </p>
                        </a-comment>
                       
                    </a-list-item>
                </a-list>
    </a-modal>
      </div>
  </div>
</template>

<script>
import moment from 'moment';
export default {
  components: {},
  props: {},
  data() {
    return {
        searchValue: '',
        data: [
        {
          author: 'hujia',
          avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
          content:
            '1111111111@111 -- TP项目组',
          datetime: moment().subtract(1, 'days'),
          scopedSlots: {icon: 'custom'}
        },
        {
          author: '可爱小胡佳',
          avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
          content:
            '2222222222@3333 -- TP2项目组',
          datetime: moment().subtract(2, 'days'),
        },
        {
          author: 'cooo',
          avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
          content:
            '3333333@444444 -- TP3项目组',
          datetime: moment().subtract(2, 'days'),
        //   actions: ['禁用']
        },

      ],
      moment,
       ModalText: 'Content of the modal',
      visible: false,
      confirmLoading: false,
    };
  },
  watch: {},
  computed: {},
  methods: {
    //   添加成员
      handleAddMembers() {
          this.showModal();
      },
       showModal() {
      this.visible = true;
    },
    handleOk(e) {
      this.ModalText = 'The modal will be closed after two seconds';
      this.confirmLoading = true;
      setTimeout(() => {
        this.visible = false;
        this.confirmLoading = false;
      }, 2000);
    },
    handleCancel(e) {
      console.log('Clicked cancel button');
      this.visible = false;
    },
  },
  created() {},
  mounted() {}
};
</script>
<style lang="less" scoped>
.wrapper{
    width: 100%;
    height: calc(100vh - 60px);
    box-sizing: border-box;
    overflow: hidden;
    background-color: #f5f5f5;
    .container {
        display: flex;
        flex-direction: row;
        width:1100px;
        height: 800px;
        margin: 30px auto;
        // padding: 10px;
        background-color: #fff;
        .left {
            width: 280px;
            // background-color: pink;
            border-right: 1px solid #e8e8e8;
            .search-container {
                padding: 20px 12px 10px 10px;
                width: 270px;
                 height: 70px;
                font-size: 12px;
               /deep/ .ant-input-lg {
                    font-size: 14px;
                }    
            }
            .menu-title {
                padding: 10px 20px;
                font-size: 14px;
            }
            .menu {
                padding-left: 0;
                /deep/.ant-menu-vertical {
                    border-right: none;
                }
            }
        }
        .right {
            width: 820px;
            padding: 10px 10px;
            .user-list {
                padding: 10px;
                /deep/ .ant-card-head-title {
                    font-size: 20px;
                    font-weight: 700;
                }
                /deep/ .ant-card-extra {
                    font-size: 16px;
                }
                .ant-list-item {
                    height: 80px;
                }
            }
            // background-color: pink;
        }
    }
    .add-user {
       /deep/ .ant-input-lg {
            font-size: 13px;
        }
    }
}
</style>